Refer to the following code format to output the screenshot code.

<html>
<head>
  <meta charset="UTF-8">
  <title>Form Layout</title>
  <style>
    #app {
      background-color: #f0f2f5;
      padding: 24px;
      max-width: 960px;
      margin: 0 auto;
    }
    .ant-row {
      margin-bottom: 24px;
    }
    .ant-col-8 {
      padding-right: 8px;
    }
    .ant-col-16 {
      padding-left: 8px;
    }
  </style>
  <script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
  <script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
  <script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
  <script src="https://registry.npmmirror.com/dayjs/1.11.10/files/dayjs.min.js"></script>
  <script src="https://registry.npmmirror.com/antd/5.12.2/files/dist/antd.js"></script>
  <script src="https://registry.npmmirror.com/@ant-design/pro-components/2.6.43/files/dist/pro-components.min.js"></script>
</head>
<body>
<div id="app"></div>

<script type="text/babel">
  const { Input, Form, Card, Col, Row } = antd;
  const { ProForm,  ProFormText, ProFormSelect, ProFormDateRangePicker} = ProComponents;
  function App() {
    return (
      <ProForm>
        <Card title="" bordered={false}>
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormText
                label={''}
                name="name"
                placeholder=""
              />
            </Col>
            <Col
              xl={{
                span: 6,
                offset: 2,
              }}
              lg={{
                span: 8,
              }}
              md={{
                span: 12,
              }}
              sm={24}
            >
              <ProFormText
                label={''}
                name="url"
                fieldProps={{
                  style: {
                    width: '100%',
                  },
                  addonBefore: 'http://',
                  addonAfter: '.com',
                }}
                placeholder=""
              />
            </Col>
            <Col
              xl={{
                span: 8,
                offset: 2,
              }}
              lg={{
                span: 10,
              }}
              md={{
                span: 24,
              }}
              sm={24}
            >
              <ProFormSelect
                label={''}
                name="owner"
                options={[
                ]}
                placeholder=""
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                label={''}
                name="approver"
                options={[
                ]}
                placeholder=""
              />
            </Col>
            <Col
              xl={{
                span: 6,
                offset: 2,
              }}
              lg={{
                span: 8,
              }}
              md={{
                span: 12,
              }}
              sm={24}
            >
              <ProFormDateRangePicker
                label={''}
                name="dateRange"
                fieldProps={{
                  style: {
                    width: '100%',
                  },
                }}
              />
            </Col>
          </Row>
        </Card>
      </ProForm>
    );
  }

  ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>